<template>
  <div class="page">
    <div v-if="!isVideoPage" class="h-100">
      <div class="flex align-center">
        <div class="page-brand">账号管理</div>
        <div class="page-sub">
          抖音，快手，哔哩哔哩，可使用线上发布和扫码发布；视频号+小红书+淘宝请使用客户端授权+发布！
        </div>
      </div>
      <div class="g-card flex-a align-center brand-list">
        <div
          v-for="(item, index) in brandList"
          :key="item.name"
          class="item flex-v flex-c align-center"
          @click.stop="handleShow(item.value, item.name, index)"
        >
          <img :src="item.img" alt="" class="icon">
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
      <div class="flex align-center mt">
        <div class="page-brand">已授权账号</div>
        <div class="page-sub link">账号数：{{ total }}</div>
      </div>
      <div class="g-card">
        <div class="flex-b align-center">
          <div class="flex align-center">
            <div class="prefix-form-item">
              <div class="prefix-label">所属平台</div>
              <el-select
                v-model="queryForm.platform"
                placeholder="请选择所属平台"
              >
                <el-option
                  v-for="item in platformList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="prefix-form-item">
              <div class="prefix-label">分组</div>
              <el-select v-model="queryForm.groupId" placeholder="请选择分组">
                <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.groupName"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
          <div class="flex-e align-center">
            <el-button type="primary" @click="getList()">
              <i class="el-icon-search" />
              搜索
            </el-button>
            <el-button type="primary" @click="reset">
              <i class="el-icon-search" />
              重置
            </el-button>
            <el-button type="primary" @click="openGroup"> 分组管理 </el-button>
            <el-button type="primary"> 导出报表 </el-button>
          </div>
        </div>
        <div
          class="account-list scroll-box"
          style="height: calc(100vh - 390px); overflow-y: auto"
        >
          <div
            v-for="(item, index) in list"
            :key="index"
            class="item flex-b align-center"
          >
            <div style="width: 300px;">
              <div class="flex align-center">
                <div class="avatar-box">
                  <img
                    v-if="item.avatar"
                    crossorigin="anonymous"
                    :src="item.avatar"
                    alt=""
                    class="avatar"
                  >
                  <img
                    v-else
                    src="@/assets/images/auth/avatar.png"
                    alt=""
                    class="avatar"
                  >
                  <div class="badge bg-blue nowrap flex-c align-center">
                    已授权
                  </div>
                </div>
                <div>
                  <div class="name">{{ item.accountName }}</div>
                  <div class="sub">
                    <div>首次授权时间：{{ item.createTime?item.createTime.substring(0,10):'' }}</div>
                    <div>预计下次授权：{{ item.nextDate?item.nextDate.substring(0,10):'' }}</div>
                  </div>
                </div>
              </div>
              <div class="flex-c">
                <div
                  v-if="item.platform == 'douyin'"
                  class="tag flex-c align-center border-blue"
                >
                  <img
                    src="@/assets/images/auth/douyin.png"
                    alt=""
                    class="icon"
                  >
                  抖音{{ accountTypeMap[item.accountType] }}
                </div>
                <div
                  v-if="item.platform == 'kuaishou'"
                  class="tag flex-c align-center border-blue"
                >
                  <img
                    src="@/assets/images/auth/kuaishou.png"
                    alt=""
                    class="icon"
                  >
                  快手{{ accountTypeMap[item.accountType] }}
                </div>
              </div>
            </div>
            <div style="max-width: calc(100% - 300px);margin-left: 30px;">
              <div class="flex-b align-center">
                <div class="value-box flex-v flex-c">
                  <div class="name">播放量</div>
                  <div class="value">6841251</div>
                </div>
                <div class="value-box flex-v flex-c ">
                  <div class="name">视频数量</div>
                  <div class="value">352</div>
                </div>
                <div class="value-box flex-v flex-c ">
                  <div class="name">粉丝量</div>
                  <div class="value">1250</div>
                </div>
                <div class="value-box flex-v flex-c ">
                  <div class="name">点赞量</div>
                  <div class="value">671</div>
                </div>
                <div class="value-box flex-v flex-c ">
                  <div class="name">评论量</div>
                  <div class="value">35</div>
                </div>
              </div>
              <div class="flex align-center">
                <div
                  class="icon-btn flex align-center nowrap"
                  @click="isVideoPage = true"
                >
                  <img
                    src="@/assets/images/auth/spgl.png"
                    alt=""
                    class="icon"
                  >视频管理
                </div>
                <div class="icon-btn flex align-center nowrap">
                  <img
                    src="@/assets/images/auth/fbgz.png"
                    alt=""
                    class="icon"
                  >发布挂载
                </div>
                <div class="icon-btn flex align-center nowrap">
                  <img
                    src="@/assets/images/auth/zdhf.png"
                    alt=""
                    class="icon"
                  >自动回复
                </div>
                <div class="icon-btn flex align-center nowrap">
                  <img
                    src="@/assets/images/auth/gxsj.png"
                    alt=""
                    class="icon"
                  >更新数据
                </div>
                <div class="icon-btn flex align-center nowrap">
                  <img
                    src="@/assets/images/auth/qxsq.png"
                    alt=""
                    class="icon"
                  >取消授权
                </div>
                <div class="prefix-form-item tight primary" style=" margin-top: 26px;">
                  <div class="prefix-label">分组</div>
                  <el-select
                    :value="item.groupId_dictText || item.groupName"
                    placeholder="请选择所属平台"
                    @change="(e) => putIntoGroup(e, item)"
                  >
                    <el-option
                      v-for="child in groupList"
                      :key="child.id"
                      :label="child.groupName"
                      :value="child.groupName"
                    />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="h-100">
      <div class="flex align-center">
        <div class="page-brand">视频管理</div>
        <div class="page-sub">
          抖音，快手，哔哩哔哩，可使用线上发布和扫码发布；视频号+小红书+淘宝请使用客户端授权+发布！
        </div>
      </div>
      <div class="g-card flex-b align-center">
        <div
          v-for="item in videoValueList"
          :key="item.name"
          class="value-box flex-c flex-v align-center br"
        >
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}</div>
          <div :class="[item.ratio > 0 ? 'red' : 'green']">
            {{ item.ratio > 0 ? "+" : "-" }}{{ item.ratio }}
          </div>
        </div>
      </div>
      <div class="page-brand mt">发布明细</div>
      <div class="g-card">
        <div class="flex-b align-center">
          <div class="flex align-center">
            <div class="prefix-form-item">
              <div class="prefix-label">发布账号</div>
              <el-select
                v-model="queryForm.accountType"
                placeholder="请选择发布账号"
              >
                <el-option
                  v-for="item in accountTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="prefix-form-item">
              <div class="prefix-label">发布平台</div>
              <el-select
                v-model="queryForm.platform"
                placeholder="请选择发布平台"
              >
                <el-option
                  v-for="item in groupList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="prefix-form-item">
              <div class="prefix-label">视频标题</div>
              <el-input
                v-model="queryForm.title"
                placeholder="请输入视频标题"
              />
            </div>
          </div>
          <div class="flex-e align-center">
            <el-button type="primary"> 导出报表 </el-button>
          </div>
        </div>
        <div
          class="video-list scorll-box"
          style="height: calc(100vh - 390px); overflow-y: auto"
        >
          <div v-for="item in 3" :key="item" class="item flex align-center">
            <img src="@/assets/images/temp.webp" alt="" class="img">
            <div class="f1">
              <div class="name">
                手机上，剪辑视频怎么做满屏？视频批量剪辑怎么把竖屏的视频变成横屏？推荐呆头鹅批量剪辑视频软件，剪辑兔短视频矩阵系统，非常好用
                #探店宝软件可靠吗 #多账号发布同一作品怎么不限流
                #批量剪辑软件免费电脑版 #批量发布视频软件靠谱吗 #剪辑软件推荐
              </div>
              <div class="flex align-center" style="margin-top: 8px">
                <div
                  class="tag flex-c align-center border-blue"
                  style="margin-top: 0"
                >
                  <img
                    src="@/assets/images/auth/douyin.png"
                    alt=""
                    class="icon"
                  >
                  抖音企业号
                </div>
                <div class="circle-box flex align-center">
                  <div class="circle bg-green" />
                  <div class="color-green">发布成功</div>
                </div>
              </div>
              <div class="name" style="margin-top: 10px">
                发布账号：视频批量剪辑软件
              </div>
              <div class="sub" style="margin-top: 12px">
                <div>创建时间：2024-03-28 13:17:58</div>
                <div>更新时间：2024-03-28 13:17:58</div>
                <div>发布时间：2024-03-28 13:17:58</div>
              </div>
              <div class="flex-b align-center" style="margin-top: 20px">
                <div class="flex align-center">
                  <div class="icon-box flex align-center">
                    <img
                      src="@/assets/images/auth/icon1.png"
                      alt=""
                      class="icon"
                    >
                    7812
                  </div>
                  <div class="icon-box flex align-center">
                    <img
                      src="@/assets/images/auth/icon2.png"
                      alt=""
                      class="icon"
                    >
                    152
                  </div>
                  <div class="icon-box flex align-center">
                    <img
                      src="@/assets/images/auth/icon3.png"
                      alt=""
                      class="icon"
                    >
                    20
                  </div>
                  <div class="icon-box flex align-center">
                    <img
                      src="@/assets/images/auth/icon4.png"
                      alt=""
                      class="icon"
                    >
                    16
                  </div>
                  <div class="icon-box flex align-center">
                    <img
                      src="@/assets/images/auth/icon5.png"
                      alt=""
                      class="icon"
                    >
                    4
                  </div>
                </div>
                <div class="flex-e align-center">
                  <el-button size="mini">更新</el-button>
                  <el-button size="mini" type="primary">查看视频</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Douyin ref="douyin" @ok="openUrl" />
    <Kuaishou ref="kuaishou" @ok="openUrl()" />
    <Other ref="other" :title="title" />
    <GroupModal ref="groupModal" />
  </div>
</template>

<script>
import Douyin from './components/authDialog/Douyin.vue'
import Kuaishou from './components/authDialog/Kuaishou.vue'
import Other from './components/authDialog/Other.vue'
import GroupModal from './components/GroupModal.vue'
import { getList, saveToken } from '@/api/auth'
import { getGroupList, putIntoGroup } from '@/api/group'
import { getToken } from '@/utils/auth' // get token from cookie

export default {
  name: 'AccountAuth',
  components: { Douyin, Kuaishou, Other, GroupModal },
  data() {
    return {
      brandList: [
        {
          img: require('@/assets/images/auth/douyin.png'),
          name: '抖音授权',
          value: 'douyin',
          url: ''
        },
        {
          img: require('@/assets/images/auth/kuaishou.png'),
          name: '快手授权',
          value: 'kuaishou',
          url: 'https://open.kuaishou.com/oauth2/authorize?app_id=ks687924845154152687&scope=user_info&response_type=code&ua=pc&redirect_uri=https://matrixcat-api.chuqv.tech/matrixcat-api/userInfo/ksReturnUrl&state=chuqv'
        },
        {
          img: require('@/assets/images/auth/shipinhao.png'),
          name: '视频号',
          value: 'other'
        },
        {
          img: require('@/assets/images/auth/xiaohongshu.png'),
          name: '小红书',
          value: 'other'
        },
        {
          img: require('@/assets/images/auth/bilibili.png'),
          name: '哔哩哔哩',
          value: 'bilibili',
          url: `https://passport.bilibili.com/register/pc_oauth2.html#/?client_id=c42a9e61c4b74d45&return_url=https://matrixcat-api.chuqv.tech/matrixcat-api/userInfo/bzReturnUrl&response_type=code&state=chuqv`
        },
        {
          img: require('@/assets/images/auth/taobao.png'),
          name: '淘宝',
          value: 'other'
        },
        {
          img: require('@/assets/images/auth/client.png'),
          name: '下载客户端',
          value: ''
        }
      ],
      platformList: [
        {
          name: '抖音',
          value: 'douyin'
        },
        {
          name: '快手',
          value: 'kuaishou'
        },
        {
          name: '视频号',
          value: 'shipinhao'
        },
        {
          name: '小红书',
          value: 'xiaohongshu'
        },
        {
          name: '哔哩哔哩',
          value: 'bilibili'
        },
        {
          name: '淘宝',
          value: 'taobao'
        }
      ],
      currentBrand: {},
      queryForm: {
        platform: '',
        groupId: ''
      },
      groupList: [],
      list: [],
      title: '小红书',
      isVideoPage: false,
      videoValueList: [
        { name: '总发布数量', value: '95426812', ratio: 256 },
        { name: '昨日发布数量', value: '68128', ratio: 36 },
        { name: '昨日发布账号数', value: '218', ratio: 35 },
        { name: '抖音发布数量', value: '68128', ratio: -156 },
        { name: '快手发布数量', value: '38128', ratio: 36 },
        { name: 'B站发布数量', value: '38128', ratio: 36 }
      ],
      // accountType team,person,employee
      accountTypeList: [
        { label: '个人号', value: 'person' },
        { label: '企业号', value: 'team' },
        { label: '员工号', value: 'employee' }
      ],
      accountTypeMap: {
        person: '个人号',
        team: '企业号',
        employee: '员工号'
      },
      code: '',
      accountType: '',
      total: 0
    }
  },
  created() {
    const regex = /[?&]code=([^&]*)/i
    const match = location.href.match(regex)
    this.code = match ? match[1] : ''
    this.getDicts()
    this.saveToken()
    this.getList()
  },
  methods: {
    async putIntoGroup(value, account) {
      const item = this.groupList.find((item) => item.groupName === value)
      if (item && account) {
        const res = await putIntoGroup({
          accountIds: account.id.toString(),
          groupId: item.id
        })
        if (res.success) {
          this.$message.success('操作成功')
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      }
    },
    reset() {
      for (const key in this.queryForm) {
        this.queryForm[key] = ''
      }
      this.getList()
    },
    async getDicts() {
      this.getGroupList()
    },
    async getGroupList() {
      const res = await getGroupList()
      if (res.success) {
        this.groupList = res.result.records
      } else {
        this.$error(res.message)
      }
    },
    async saveToken() {
      const token = getToken()
      if (sessionStorage[token + '-currentBrand']) {
        const currentBrand = JSON.parse(
          sessionStorage[token + '-currentBrand']
        )
        if (currentBrand && this.code && currentBrand.url) {
          const res = await saveToken({
            accountType: currentBrand.accountType || this.accountType,
            code: this.code,
            platform: currentBrand.value || ''
          })
          if (res.success) {
            this.$message.success('授权成功')
            sessionStorage.removeItem(sessionStorage[token + '-currentBrand'])
            this.code = ''
            this.accountType = 'person'
            this.getList()
          } else {
            this.$message.error(res.message)
          }
        }
      }
    },
    async getList() {
      const res = await getList(this.queryForm)
      if (res.success) {
        this.list = res.result.records
        this.total = res.result.total
      }
      console.log(res)
    },
    handleShow(refName, title, index = 0) {
      const token = getToken()
      this.currentBrand = this.brandList[index] || {}

      sessionStorage[token + '-currentBrand'] = JSON.stringify(
        this.currentBrand
      )
      if (refName && this.$refs[refName]) {
        this.title = title
        this.$refs[refName].open()
      } else if (this.currentBrand.url) {
        this.openUrl()
      }
    },
    openGroup() {
      this.$refs.groupModal.open()
    },
    openUrl(accountType = '') {
      const token = getToken()
      if (sessionStorage[token + '-currentBrand']) {
        const currentBrand = JSON.parse(
          sessionStorage[token + '-currentBrand']
        )
        if (accountType) {
          currentBrand.accountType = accountType
          this.accountType = accountType
        }
        const linkMap = {
          douyin: {
            person:
              'https://open.douyin.com/platform/oauth/connect?client_key=awv0q8p4hpaj8snv&response_type=code&scope=user_info,video.list.bind,item.comment,video.create.bind&redirect_uri=https://matrixcat-api.chuqv.tech/matrixcat-api/userInfo/dyReturnUrl',
            team: 'https://open.douyin.com/platform/oauth/connect?client_key=awv0q8p4hpaj8snv&response_type=code&scope=user_info,video.list.bind,item.comment,video.create.bind,im.direct_message&redirect_uri=https://matrixcat-api.chuqv.tech/matrixcat-api/userInfo/dyReturnUrl',
            employee:
              'https://open.douyin.com/platform/oauth/connect?client_key=awv0q8p4hpaj8snv&response_type=code&scope=user_info,video.list.bind,item.comment,video.create.bind,im.direct_message&redirect_uri=https://matrixcat-api.chuqv.tech/matrixcat-api/userInfo/dyReturnUrl'
          }
        }
        let link = ''
        if (this.accountType) {
          link = linkMap[currentBrand.value][this.accountType]
        } else if (currentBrand.url) {
          link = currentBrand.url
        }
        currentBrand.url = link
        sessionStorage[token + '-currentBrand'] = JSON.stringify(currentBrand)
        window.open(link, '_blank')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.video-list {
  .item {
    box-sizing: border-box;
    background: rgba(0, 119, 255, 0.1);
    padding: 14px;
    margin-top: 14px;
    border-radius: 5px;

    border: 1px solid rgba(255, 255, 255, 1);
    .img {
      width: 1.95rem;
      height: 2.2rem;
      margin-right: 0.48rem;
    }
    .name {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }
    .circle-box {
      font-size: 14px;
    }
    .circle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right:6px;
    }
    .sub {
      font-size: 14px;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);
    }
    .icon-box {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-right: 22px;
      .icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
    }
  }
}
.red {
  font-size: 14px;
  font-weight: 500;
  color: rgba(249, 58, 11, 1);
  margin-top: 0.24rem;
}
.green {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 255, 102, 1);
  margin-top: 0.24rem;
}
.br {
  border-right: 1px solid rgba(238, 238, 238, 0.2);
  &:last-child {
    border-right: 0;
  }
}

.tag {
  height: 35px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 119, 255, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 119, 255, 1);
  padding: 0 0.16rem;
  margin-top: 14px;
  .icon {
    width: 0.25rem;
    height: 0.25rem;
    margin-right: 0.16rem;
  }
}
.account-list {
  .item {
    box-sizing: border-box;
    background: rgba(0, 119, 255, 0.1);
    margin-top: 30px;
    height: 200px;
    padding:0 4vw;
    .tight {
      margin-top: 0.24rem;
    }
    .prefix-label {
      font-size: 14px;
    }
    .value-box {
  .name {
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
  }
  .value {
    font-size: 20px;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-top: 12px;
  }
}
    .icon-btn {
      margin-top: 26px;
      box-sizing: border-box;
      padding: 0 10px;
      height: 35px;
      border-radius: 5px;
      background: rgba(0, 119, 255, 1);
      margin-right: 12px;
      cursor: pointer;
      .icon {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .name {
      font-size: 20px;
      color: rgba(0, 0, 0, 1);
    }
    .sub {
      font-size: 14px;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);;
      margin-top: 14px;
    }

    .avatar-box {
      position: relative;
      margin-right: 26px;
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      .badge {
        width: 65px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 2px 10px;
        border-radius: 15px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}
.page-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  margin-left: 18px;
  position: relative;
  top: -6px;
}
.page-sub.link {
  color: rgba(0, 119, 255, 1);
}
.mt {
  margin-top: 30px;
}
.prefix-form-item {
  margin-right: 50px;
  &:last-child {
    margin-right: 0;
  }
}
.brand-list {
  height: 160px;
  .item {
    cursor: pointer;
    transition: all .3s linear;
    .icon {
      width: 70px;
      height: 70px;
      margin-bottom: 15px;
    }
    .name {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
    &:hover{
      .icon{
        transform: scale(1.08);
      }
    }
  }
}
.dark {
  .account-list .item {
    .name,
    .value,
    .sub {
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
